<template>
  <div class="body">
    <div v-if="list">
      <div class="header">
        <van-nav-bar
          :title="list.community"
          left-arrow
          @click-left="$router.go(-1)"
          bgc
        />
        <img :src="url + list.houseImg" alt="" />
        <div class="header-text">
          <div class="header-text-top">
            <p>{{ list.title }}</p>
            <span v-for="item in list.tags" :key="item"> {{ item }} </span>
          </div>
          <div class="header-text-content">
            <div>
              <p>{{ list.price }}<i>/月</i></p>
              <span>租金</span>
            </div>
            <div>
              <p>{{ list.roomType }}</p>
              <span>房型</span>
            </div>
            <div>
              <p>{{ list.size }}平米</p>
              <span>面积</span>
            </div>
          </div>
          <div class="header-text-bottom">
            <div class="left">
              <p><span>装修:</span>精装</p>
              <p><span>楼层:</span>{{ list.floor }}</p>
            </div>
            <div class="right">
              <p>
                <span>朝向:</span
                ><i v-for="item in list.oriented" :key="item">{{ item }}</i>
              </p>
              <p><span>类型:</span>普通住宅</p>
            </div>
          </div>
        </div>
      </div>
      <div class="interval"></div>
      <div class="map">
        <h4>{{ list.community }}</h4>
        <div class="map-content"></div>
        <div class="map-text">房屋配套</div>
        <div class="map-img">
          <van-grid :column-num="5" class="configuration" :border="false">
            <van-grid-item v-for="item in list.supporting" :key="item">
              <van-icon
                class="iconfont"
                class-prefix="icon"
                :name="mating[item]"
                size="20"
              />
              <p>{{ item }}</p>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="interval"></div>
      <div class="describe">
        <h4>房源概况</h4>
        <div class="text">
          <div class="user">
            <div class="left">
              <img src="http://liufusong.top:8080/img/avatar.png" alt="" />
              <div class="left-text">
                <p>王女士</p>
                <span
                  ><van-icon
                    class="iconfont"
                    class-prefix="icon"
                    name="renzheng
"
                  />已认证房主</span
                >
              </div>
            </div>
            <van-button plain type="primary" class="right">发消息</van-button>
          </div>
          <div class="texts">
            {{ list.description }}
          </div>
        </div>
      </div>
      <div class="interval"></div>
      <div class="goods">
        <div class="title">猜你喜欢</div>
        <HouseState :list="newList"></HouseState>
      </div>
      <div class="footer">
        <van-button type="default" class="default" @click="setCollect">
          <img
            src="http://liufusong.top:8080/img/star.png"
            alt=""
            v-if="isCollect"
          />
          <img src="http://liufusong.top:8080/img/unstar.png" alt="" v-else />
          收藏</van-button
        >
        <van-button type="default" class="default">在线咨询</van-button>
        <van-button type="primary" class="phone">电话预约</van-button>
      </div>
    </div>
    <p v-else class="toLoad">加载中，请稍等...</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { HouseParticulars, Collect, addCollect, delCollect } from '@/api/city'
export default {
  name: 'contented-page',
  data () {
    return {
      info: null,
      list: null,
      isCollect: false,
      orientation: '',
      url: 'http://liufusong.top:8080',
      newList: [
        {
          houseImg: '/newImg/7bj63hd2c.jpg',
          title: '复兴门外大街 2室1厅 10000元',
          tags: ['近地铁', '集中供暖', '新上'],
          price: 10000,
          desc: '二室/66/南/复兴门外大街',
          houseCode: '5cc467fc1439630e5b430566'
        },
        {
          houseImg: '/newImg/7bi2cga4p.jpg',
          title: '建邦华庭西区 2室1厅 4600元',
          tags: ['近地铁', '集中供暖', '新上'],
          price: 4600,
          desc: '二室/53/南/建邦华庭西区',
          houseCode: '5cc467e31439630e5b42fffa'
        },
        {
          houseImg: '/newImg/7bi61paa8.jpg',
          title: '万寿路乙15号院 2室1厅 6000元',
          tags: ['近地铁', '集中供暖', '新上', '随时看房'],
          price: 6000,
          desc: '二室/92/南/万寿路乙15号院',
          houseCode: '5cc46ab31439630e5b439daf'
        }
      ],
      mating: {
        电视: 'dianshi',
        冰箱: 'bingxiang',
        洗衣机: 'xiyiji',
        空调: 'kongdiao',
        热水器: 'reshuiqi',
        沙发: 'haofangtuo400iconfont2shafa',
        暖气: 'nuanqi',
        宽带: 'wifi',
        衣柜: 'yigui-hui',
        天然气: 'tianranqi'
      }
    }
  },
  computed: {
    ...mapState('user', ['houseId'])
  },
  async created () {
    const house = await HouseParticulars(this.houseId)
    this.list = house.body
    const collect = await Collect(this.houseId)
    console.log(collect)
    this.isCollect = collect.body.isFavorite
  },
  methods: {
    async setCollect () {
      if (this.isCollect) {
        const del = await delCollect(this.houseId)
        this.isCollect = false
        console.log(del)
      } else {
        const add = await addCollect(this.houseId)
        this.isCollect = true
        console.log(add)
      }
    }
  }
}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header {
  img {
    width: 100%;
    height: 260px;
    background-color: #ccc;
  }
  .header-text {
    padding: 0 15px;
    .header-text-top {
      height: 90px;
      border-bottom: 1px solid #ccc;
      padding: 20px 0;
      p {
        margin-bottom: 10px;
      }
      span {
        width: 80px;
        text-align: center;
        padding: auto;
        color: #6ccfda;
        border-radius: 5px;
        height: 20px;
        font-size: 10px;
        background-color: #e1f5f8;
        margin-bottom: 5px;
        margin-top: 5px;
      }
    }
    .header-text-content {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      height: 80px;
      border-bottom: 1px solid #ccc;
      padding: 20px;
      div {
        width: 80px;
        text-align: center;
        p {
          color: #fa5741;
          font-weight: 600;
          margin-bottom: 5px;
          i {
            font-style: italic;
            font-size: 10px;
          }
        }
        span {
          font-size: 10px;
          color: #beaba0;
        }
      }
    }
    .header-text-bottom {
      padding: 10px 0;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      p {
        margin-top: 10px;
        span {
          margin-right: 10px;
          color: #999999;
        }
      }
    }
  }
}
.interval {
  background-color: #f6f5f6;
  width: 100%;
  height: 10px;
}
.map {
  h4 {
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 400;
  }
  .map-content {
    width: 100%;
    height: 150px;
    background-color: #ccc;
  }
  .map-text {
    font-weight: 600;
    padding: 20px 0;
    margin: 0 15px;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
  }
  .map-img {
    .configuration {
      p {
        font-size: 14px;
        margin-top: 5px;
        color: #4c4c4c;
      }
      .pitch {
        color: #21b97a;
      }
    }
  }
}
.describe {
  h4 {
    padding: 20px 0;
    margin: 0 15px;
    font-size: 14px;
    font-weight: 600;
    height: 60px;
    border-bottom: 1px solid #dedede;
  }
  .text {
    .user {
      display: flex;
      padding-right: 15px;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        padding: 20px 15px;
        img {
          height: 60px;
          width: 60px;
          background-color: #ccc;
          border-radius: 50%;
          margin-right: 10px;
        }
        .left-text {
          font-size: 14px;
          p {
            margin-bottom: 8px;
          }
          span {
            color: #fb576b;
            font-size: 12px;
          }
        }
      }
      .right {
        width: 80px;
        height: 30px;
      }
    }
    .texts {
      font-size: 14px;
      padding: 0 10px 10px 10px;
    }
  }
}
.goods {
  margin-bottom: 50px;
  .title {
    font-weight: 600;
    padding: 20px 0;
    margin: 0 15px;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  .default {
    flex: 1;
    height: 50px;
    font-size: 16px;
    img {
      height: 15px;
      width: 15px;
    }
  }
  .phone {
    flex: 1;
    height: 50px;
    font-size: 16px;
  }
}
.toLoad {
  position: absolute;
  top: 45%;
  left: 30%;
}
</style>
